<template>
  <div>
    <el-menu
      active-text-color="#1890ff"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      text-color="#fff"
      :collapse="isMenuCollapsed"
    >
    <div class="centered-button">
        <el-button @click="toggleMenu">
          <el-icon size="20">
            <template v-if="isMenuCollapsed">
              <Expand @click="toggleMenu" />
            </template>
            <template v-else>
              <Fold @click="toggleMenu" />
            </template>
          </el-icon>
        </el-button>
      </div>
        <el-menu-item index="1" @click="handleCourse">
          <el-icon><icon-menu /></el-icon>
          <span>课程管理</span>
        </el-menu-item>
        <el-menu-item index="2" @click="handleHomeworkManage">
          <el-icon><Document /></el-icon>
          <span>作业管理</span>
        </el-menu-item>
        <el-menu-item index="3" @click="handleInfoChange">
          <el-icon><setting /></el-icon>
          <span>设置</span>
        </el-menu-item>
        <el-menu-item index="4" @click="dialogVisible=true">
          <el-icon><DArrowLeft /></el-icon>
          <span>退出</span>
        </el-menu-item>
      </el-menu>
      <el-dialog
          v-model="dialogVisible"
          >
          <span>您确定要退出吗？</span>
          <template v-slot:footer>
              <span class="dialog-footer">
              <el-button @click="dialogVisible=false">取消</el-button>
              <el-button type="primary" @click="handleQuit">确认</el-button>
              </span>
          </template>
          </el-dialog>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import {
  Expand,
  Fold,
  Document,
  Menu as IconMenu,
  Setting,
  DArrowLeft
} from '@element-plus/icons-vue'

const router = useRouter()
const store = useStore()
const isMenuCollapsed = ref(false)

const kind = ref(store.state.kind)

onMounted(() => {
  kind.value = store.state.kind
})

const toggleMenu = () => {
  isMenuCollapsed.value = !isMenuCollapsed.value
}

const handleCourse = () => {
  kind.value = store.state.kind
  if (kind.value === '1') {
    router.push('/studentCourseManage')
  } else {
    router.push('/teacherCourseManage')
  }
}

const handleInfoChange = () => {
  router.push('/infoChange')
}

const handleHomeworkManage = () => {
  kind.value = store.state.kind
  if (kind.value === '1') {
    router.push('/studentHomeworkManage')
  } else {
    router.push('/teacherHomeworkManage')
  }
}

const dialogVisible = ref(false)
const handleQuit = () => {
  store.dispatch('logout')
  router.push('/login')
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
.el-menu-vertical-demo {
  height: 100vh;
  position: fixed;
}
.centered-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}
</style>
